import { useEffect, useState } from 'react';
import './app.css';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import './styles/githubMarkdown.css';
// 代码高亮
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// 高亮的主题
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';

function App() {
  const [mdContent, setMdContent] = useState('');

  useEffect(() => {
    async function loadText() {
      const response = await fetch('/Mobx使用.md');
      const text = await response.text();
      setMdContent(text);
    }

    loadText();
  }, []);

  return (
    <div className="app">
      <ReactMarkdown
        className="markdown-body"
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeRaw]}
        components={{
          // 代码高亮
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '');
            return !inline && match ? (
              <SyntaxHighlighter
                children={String(children).replace(/\n$/, '')}
                style={oneDark as any}
                language={match[1]}
                PreTag="div"
                showLineNumbers={true}
                {...props}
              />
            ) : (
              <code className={className} {...props} children={children} />
            );
          },
        }}
      >
        {mdContent}
      </ReactMarkdown>
    </div>
  );
}

export default App;
